<template>
	<view class="content">
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H" @click="setHeader(item, i)" v-for="(item, i) in WeekList" :key="i"
					:class="currentDate == item.code ? 'bg-cyan text-shadow' : 'bg-blue'">
					<view class="date-content">
						<view class="date-day">{{ item.day }}</view>
						<view class="date-name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" style="height:22rpx;">

			</view>
			<scroll-view scroll-y="true" style="height:74vh;" refresher-enabled="true" :refresher-triggered="triggered"
				:refresher-threshold="20" refresher-background="#C2DEFF" @refresherpulling="onPulling"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">

				<view v-for="(item, imdex) in contentList" :key="imdex" v-if="contentList.length>0"
					style="height:180rpx; margin-bottom: 30rpx;box-sizing: border-box;" class="content-box">
					<view style="display: flex;height: 160rpx;">
						<!-- 左侧 -->
						<view style="height: 180rpx;width:180rpx;background-color: red;position: relative;">
							<image :src="item.coverimage" mode="aspectFill" style="width:180rpx;height: 180rpx;"></image>
							<view style="position: absolute;bottom: 0;left:0;opacity: .95;">
								<text class="content-time">
									{{item.start.split(" ")[1]}}
								</text>
							</view>
						</view>
						<!-- 内容 -->
						<view style="height:180rpx;width:400rpx;box-sizing: border-box;padding:0 16rpx;">

							<view class=""
								style="width:300rpx;font-size: 28rpx;white-space:nowrap;over-flow:hidden;text-overflow: ellipsis;">
								{{item.title}}
							</view>
							<view class="gui-flex">
								<view class="gui-text-small">
									授课：
								</view>
								<text class="content-second">
									{{item.employee}}
								</text>
							</view>
							<view>
								<text>
									预约：{{item.schedule}}人
								</text>
							</view>
							<view>
								<text class="gui-text-small">
									签到：{{item.sign}}人
								</text>
							</view>
						</view>
						<!-- 右侧 -->
						<view style="height:180rpx;width:200rpx;position:relative;" class="course-action">


							<view class="coursegroup-active" v-if="dayjs(item.start).diff(new Date(),'hour')>12">
								<text>
									可约
								</text>
							</view>
							<view class="coursegroup-disactive" v-if="dayjs(item.start).diff(new Date(),'hour')<=12">
								<text>
									不可约
								</text>
							</view>
							<view style="height:20rpx;">

							</view>
							<view class="course-btn">
								<view class="my-btn">
									<button type="default" class="forbidden" @tap="Appointment(item)"
										v-if="dayjs(item.start).diff(new Date(),'hour')<=12">
										<text>
											预约
										</text>
									</button>
									<button type="default" @tap="Appointment(item)"
										v-if="dayjs(item.start).diff(new Date(),'hour')>12">
										<text>
											预约
										</text>
									</button>
								</view>
								<view style="height:20rpx;">

								</view>
								<!-- <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down> -->
								<view class="count-down" style="min-width: 180rpx;"
									v-if="dayjs(item.start).diff(new Date(),'hour')>12">
									<u-count-down :time="dayjs(item.start).diff(new Date())" format="HH:mm:ss:SSS"
										autoStart millisecond>
									</u-count-down>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<hulu-empty></hulu-empty>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script setup>
	import {
		getWeekTime
	} from "./utils/index.js"
	import dayjs from 'dayjs'
	import {
		ref,
		watch
	} from 'vue'

	const props = defineProps({
		TimeType: {
			type: String,
			default: '本周剩余日期和下周日期'
		},
		contentList: {
			type: Array,
			default: []
		},
		SelectHeader: {
			type: Function,
			default: () => {}
		},
		initForType: {
			type: Function,
			default: () => {}
		},
		Appointment: {
			type: Function,
			default: () => {}
		},
		onPulling: {
			type: Function,
			default: () => {}
		},
		resetParam:{
			type:Function,
			default:()=>{}
		},
		myOnRefresh: {
			type: Function,
			default: () => {}
		},
		currentDate: {
			type: String,
			default: ""
		}
	})


	const emit = defineEmits(["SelectHeader", "Appointment", "onPulling", "myOnRefresh", "initForType",
		"update:currentDate","resetParam"
	])

	//需要冬天修改WeekList的数据
	const WeekList = ref(getWeekTime(props.TimeType))


	watch(() => props.TimeType, (newVal, oldVal) => {
		if (newVal !== oldVal) {
			WeekList.value = getWeekTime(newVal)
			//从新初始化一下
			if (newVal == '下周日期') {
				let newSelect = makeNextFormatDate()
				emit("SelectHeader", newSelect)
			}
			if (newVal == '上周日期') {
				let lastSelect = makeLastFormatDate()
				emit("SelectHeader", lastSelect)
			}
		}
	}, {
		deep: true
	})

	// 获取下周的日期
	const makeNextFormatDate = () => {
		const nextWeekday = dayjs(props.currentDate)
		// 定义结果对象
		const result = {
			code: nextWeekday.format('YYYY-MM-DD'),
			day: nextWeekday.day(), // 此处day返回的是0（周日）到6（周六），如需周一为1，可在后续处理中+1
			name: nextWeekday.format('dddd'), // 星期几的名称
			time: nextWeekday.format('YYYY年MM月DD日'),
		};
		//修改当前保存日期的code
		return result;
	}

	// 获取上周的日期
	const makeLastFormatDate = () => {
		const nextWeekday = dayjs(props.currentDate)
		// 定义结果对象
		const result = {
			code: nextWeekday.format('YYYY-MM-DD'),
			day: nextWeekday.day(), // 此处day返回的是0（周日）到6（周六），如需周一为1，可在后续处理中+1
			name: nextWeekday.format('dddd'), // 星期几的名称
			time: nextWeekday.format('YYYY年MM月DD日'),
		};
		//修改当前保存日期的code
		return result;
	}

	const triggered = ref(false)

	const _freshing = ref(true)
	const init = () => {
		setTimeout(() => {
			triggered.value = true;
		}, 1000);
	}

	const Appointment = (item) => {
		emit('Appointment', item);

	}
	const onPulling = (e) => {
		emit('onPulling', e);
	}
	const onRefresh = () => {
		// console.log("onRefresh...")
		triggered.value = true;
		setTimeout(() => {
			emit("myOnRefresh", true)
			uni.stopPullDownRefresh();
			triggered.value = false;
		}, 1000);
	}
	const onRestore = () => {
		triggered.value = 'restore'; // 需要重置
	}
	const setHeader = (item, i) => {
		//还需要改变样式
		let index = WeekList.value.findIndex(w => w.code == item.code)

		emit("update:currentDate", item.code)
		emit("SelectHeader", {
			code: item.code
		})
	}


	const refresherabort = () => {
		console.log(333)
	}

	defineExpose({
		Appointment,
		onPulling,
	});
</script>

<style lang="scss">
	.content {
		margin: 0 30rpx;
	}

	.barConten {
		padding: 0px 6px;
		height: 34px;
		line-height: 34px;
		background: #32323e;
		border-bottom: 1px solid #252934;
	}

	.barHeight {
		height: 10px;
		background-color: #252934;
	}

	.seniorblack {
		background-color: #C2DEFF;
	}

	.day {
		width: 18px;
		font-size: 10px;
		height: 18px;
		line-height: 18px;
		margin: 0 auto;
		border-radius: 57%;
		margin-top: 4px;
	}

	.scroll-view_H {
		height: 100rpx;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 98rpx;
		margin-right: 5px;
		height: 100rpx;
		color: #999;
		background: #cfdef3;
	}

	.date-content {
		text-align: center;

		.date-day {
			font-size: 36rpx;
		}

		.date-name {
			font-size: 28rpx;
		}
	}

	.bg-cyan {
		// background: linear-gradient(180deg, #52e5e7, #2A82E4);
		background-color: #007CFF;

		.date-content {
			.date-day {
				color: white;
				font-weight: 900;
			}

			.date-name {
				color: white;
			}
		}

	}

	.content-title {
		font-size: 26rpx;
	}

	.content-second {
		font-weight: bolder;
		font-size: 20rpx;
		color: #0abf00;
		padding: 0 4rpx;
		background-color: #96e892;
	}

	.schedule-second-green {
		font-weight: 600;
		color: #008500;
	}

	.schedule-second-red {
		text-decoration: line-through;
		font-weight: 600;
	}

	.coursegroup-active {
		text-align: center;
		font-size: 30rpx;
		line-height: 40rpx;
		height: 40rpx;
		box-sizing: border-box;
		color: #0abf00;
		background-color: #96e892;

		text {
			font-weight: 900;
		}

	}

	.coursegroup-disactive {
		text-align: center;
		font-size: 30rpx;
		line-height: 40rpx;
		height: 40rpx;
		box-sizing: border-box;
		//color: #967800;
		//background-color: #fac800;
		color: #353b48;
		background-color: #95a5a6;

		text {
			font-weight: 900;
		}
	}

	.content-time {
		color: white;
		background-color: black;
		font-weight: bolder;
		box-sizing: border-box;
		text-align: center;
		padding: 4rpx;
		font-size: 24rpx;
		padding: 0 12rpx;
		position: relative;
		overflow: hidden;
	}

	.my-btn button::after {
		border: none;
	}

	.course-btn {
		.my-btn .forbidden {
			// color: #353b48;
			background-color: #95a5a6;
		}

		.my-btn button {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-left: 0px;
			padding-right: 0px;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			border-top-left-radius: 16rpx;
			border-bottom-left-radius: 16rpx;
			border-top-right-radius: 0rpx;
			border-bottom-right-radius: 0rpx;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			line-height: 1.35;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: white;
			background-color: #007CFF;
			width: 100%;
			height: 100%;

		}

		.count-down {
			font-size: 24rpx;
		}
	}

	.u-count-down__text {
		color: red !important;
		font-size: 14rpx;
		line-height: 14rpx;
	}

	.content-box {
		border: 2rpx solid #ccc;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
	}

	.course-action {
		position: relative;
	}

	.course-state {
		position: absolute;
		bottom: 0;
		right: 0;

	}
</style>